<template>
  <view class="box">
    <view class="content">
      <view class="tit" @click="prev">
        <u-icon name="arrow-left" size="30"></u-icon>
      </view>
      <view class="search">
        <u-search :placeholder="keyword" :show-action="false" :animation="false" shape="round"></u-search>
        <button class="btn">搜索</button>
      </view>
      <view class="grid" @click="mlg">
        <u-grid :col="5" :border='false'>
          <u-grid-item v-for="(item,index) in grid" :key="index">
            <img :src="item.image" alt="" />
            <view class="grid-text">{{item.text}}</view>
          </u-grid-item>
        </u-grid>
      </view>
      <!-- 列表 -->
      <view class="options">
        <view class="o-left">
          <view class="o-title" v-for="(item,index) in text" :key="index">
            <view class="text">
              {{item.text}}
            </view>
          </view>
        </view>
        <view class="o-right">
          <view class="img">
            <img src="/static/1.png" alt="" />
          </view>
          <view class="r-bottom">
            <view class="jshw-box" v-for="(item,index) in hawu" :key="index">
              <fenleiVue :title1="item.title1" :imageurl="item.imageurl" :title2="item.title2" :title3="item.title3"
                :title4="item.title4" :title6="item.title6" :title7="item.title7" :title5="item.title5"
                :title9="item.title9" :title8="item.title8">
              </fenleiVue>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import fenleiVue from '../../compoents/fenlei/fenlei.vue'
  export default {
    components: {
      fenleiVue
    },
    data() {
      return {
        keyword: '阳澄湖大螃蟹',
        grid: [{
          image: '/static/水果.png',
          text: '水果'
        }, {
          image: '/static/蔬菜.png',
          text: '蔬菜'
        }, {
          image: '/static/肉类.png',
          text: '肉类'
        }, {
          image: '/static/海鲜.png',
          text: '海鲜'
        }, {
          image: '/static/熟食.png',
          text: '熟食'
        }],
        hawu: [{
          imageurl: '/static/rapeseed.png',
          title1: '优质小白菜',
          title2: '基地直供',
          title3: '绿色培植',
          title4: '新鲜采摘',
          title5: '基地宜采',
          title6: '9.98',
          title7: '斤',
          title9: '劵',
          title8: '减3元'
        }, {
          imageurl: '/static/lettuce.png',
          title1: '高山精选本地生菜',
          title2: '基地直供',
          title3: '绿色培植',
          title4: '新鲜采摘',
          title5: '高山有机',
          title6: '5.9',
          title7: '斤'
        }, {
          imageurl: '/static/cabbage.png',
          title1: '优质小白菜',
          title2: '基地直供',
          title3: '绿色培植',
          title4: '新鲜采摘',
          title5: '主食必备',
          title6: '3.79',
          title7: '斤',
          title9: '劵',
          title8: '减1元'
        }, {
          imageurl: '/static/melon.png',
          title1: '优质小白菜',
          title2: '基地直供',
          title3: '绿色培植',
          title4: '新鲜采摘',
          title5: '多汁香甜',
          title6: '10.47',
          title7: '斤',
          title9: '劵',
          title8: '减10元'
        }],
        text: [{
          text: "推荐"
        }, {
          text: "热销爆款"
        }, {
          text: "新品"
        }, {
          text: "绿叶菜"
        }, {
          text: "番茄"
        }, {
          text: "茄果"
        }, {
          text: "玉米"
        }, {
          text: "花菜"
        }, {
          text: "豆制品"
        }, {
          text: "菌菇"
        }, {
          text: "有机蔬菜"
        }, {
          text: "进口蔬菜"
        }]
      }
    },
    methods: {
      prev() {
        this.$router.go(-1)
      },
      mlg(){
        uni.navigateTo({
          url:"/pages/mlg/mlg"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    .content {
      width: 95%;
      margin: 0 auto;

      .tit {
        height: 50rpx;
        line-height: 50rpx;
      }

      .search {
        margin-top: 20rpx;
        width: 100%;
        position: relative;
        height: 100rpx;
        border-radius: 10rpx;

        .u-search {
          box-shadow: 10px 5px 5px #dadfdc;
        }

        .btn {
          background-color: #49ba7c;
          color: white;
          font-size: 25rpx;
          width: 150rpx;
          height: 55rpx;
          line-height: 55rpx;
          border-radius: 30rpx;
          position: absolute;
          top: 6.5rpx;
          right: 5rpx;
        }
      }

      .grid {
        img {
          width: 50rpx;
          height: 50rpx;
        }

        .grid-text {
          font-size: 28rpx;
          margin-top: 4rpx;
          color: $u-type-info;
        }
      }

      .options {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;

        .o-left {
          width: 24%;
          background-color: #fafafa;

          .o-title {
            view:hover {
              color: #49ba7c;
              border-left: 5px solid #49ba7c;
              border-radius: 10rpx;
              font-weight: bold;
            }

            .text {
              text-align: center;
              height: 90rpx;
              line-height: 90rpx;
              color: #bfbfbf;
            }
          }
        }

        .o-right {
          width: 74%;

          img {
            width: 100%;
            height: 170rpx;
          }

          .r-bottom {
            .jshw-box {
              margin: 10rpx 0;
            }
          }
        }
      }
    }
  }
</style>